<template>
  <div class="mica-surface">
    <div class="blur-layer surface"></div>
    <div :class="['surface', { 'luminosity-layer': luminosity }]"></div>
    <div class="color-layer surface"></div>
  </div>
</template>

<script>
export default {
  props: {
    luminosity: Boolean
  }
}
</script>

<style scoped>
.surface {
  position: absolute;
  inset: 0;
}
.mica-surface {
  position: fixed;
  inset: 0;
  background-image: url("../assets/wallpaper.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}
.blur-layer {
  backdrop-filter: blur(120px);
}
.luminosity-layer {
  mix-blend-mode: luminosity;
  background: rgba(243, 243, 243, 1);
}
.color-layer {
  mix-blend-mode: color;
  background: rgba(243, 243, 243, 0.5);
}
</style>
